<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虫妈LTR自然拼读</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 样式保持不变 */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
        
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
        .bounce-hover:hover { animation: bounce 0.5s ease; }
        
        @media (max-width: 768px) {
            .mobile-grid { grid-template-columns: repeat(4, 1fr) !important; }
            .mobile-layout { flex-direction: column !important; }
            .mobile-width { width: 100% !important; }
        }

        .modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; 
            justify-content: center; z-index: 50;
        }
        
        .modal-content {
            background: white; border-radius: 1rem; padding: 1.5rem;
            max-width: 64rem; width: calc(100% - 2rem); max-height: 24rem;
            overflow-y: auto; margin: 0 1rem;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="root"></div>

    <script type="text/babel">
        const { useState, useEffect } = React;

        const App = () => {
            const [selectedLetters, setSelectedLetters] = useState([]);
            const [currentWord, setCurrentWord] = useState("");
            const [showAnswer, setShowAnswer] = useState(false);
            const [currentCvcWord, setCurrentCvcWord] = useState(null);
            const [wordIndex, setWordIndex] = useState(0);
            const [feedback, setFeedback] = useState("");
            const [showFeedback, setShowFeedback] = useState(false);
            const [showLevelSelector, setShowLevelSelector] = useState(false);
            const [currentLevel, setCurrentLevel] = useState(1);
            const [showWordList, setShowWordList] = useState(false);
            const [mode, setMode] = useState("free");
            const [freeWord, setFreeWord] = useState("");
            const [selectedWordForPronunciation, setSelectedWordForPronunciation] = useState("");

            // CVC单词数据库
            const cvcWords = [
                { word: "bag", ipa: "/bæɡ/", letters: ["b", "a", "g"] },
                { word: "bed", ipa: "/bed/", letters: ["b", "e", "d"] },
                { word: "met", ipa: "/met/", letters: ["m", "e", "t"] },
                { word: "cat", ipa: "/kæt/", letters: ["c", "a", "t"] },
                { word: "cop", ipa: "/kɒp/", letters: ["c", "o", "p"] },
                { word: "fig", ipa: "/fɪɡ/", letters: ["f", "i", "g"] },
                { word: "hum", ipa: "/hʌm/", letters: ["h", "u", "m"] },
                { word: "tug", ipa: "/tʌɡ/", letters: ["t", "u", "g"] },
                { word: "mat", ipa: "/mæt/", letters: ["m", "a", "t"] },
                { word: "beg", ipa: "/beɡ/", letters: ["b", "e", "g"] },
                { word: "job", ipa: "/dʒɒb/", letters: ["j", "o", "b"] },
                { word: "map", ipa: "/mæp/", letters: ["m", "a", "p"] },
                { word: "hot", ipa: "/hɒt/", letters: ["h", "o", "t"] },
                { word: "dog", ipa: "/dɒɡ/", letters: ["d", "o", "g"] },
                { word: "run", ipa: "/rʌn/", letters: ["r", "u", "n"] },
                { word: "sad", ipa: "/sæd/", letters: ["s", "a", "d"] },
                { word: "pat", ipa: "/pæt/", letters: ["p", "a", "t"] },
                { word: "fog", ipa: "/fɒɡ/", letters: ["f", "o", "g"] },
                { word: "fan", ipa: "/fæn/", letters: ["f", "a", "n"] },
                { word: "fit", ipa: "/fɪt/", letters: ["f", "i", "t"] },
                { word: "tub", ipa: "/tʌb/", letters: ["t", "u", "b"] },
                { word: "jet", ipa: "/dʒet/", letters: ["j", "e", "t"] },
                { word: "fox", ipa: "/fɒks/", letters: ["f", "o", "x"] },
                { word: "pin", ipa: "/pɪn/", letters: ["p", "i", "n"] },
                { word: "cut", ipa: "/kʌt/", letters: ["c", "u", "t"] },
                { word: "gum", ipa: "/ɡʌm/", letters: ["g", "u", "m"] },
                { word: "jug", ipa: "/dʒʌɡ/", letters: ["j", "u", "g"] },
                { word: "pod", ipa: "/pɒd/", letters: ["p", "o", "d"] },
                { word: "tab", ipa: "/tæb/", letters: ["t", "a", "b"] },
                { word: "ten", ipa: "/ten/", letters: ["t", "e", "n"] },
                { word: "bus", ipa: "/bʌs/", letters: ["b", "u", "s"] },
                { word: "win", ipa: "/wɪn/", letters: ["w", "i", "n"] },
                { word: "mop", ipa: "/mɒp/", letters: ["m", "o", "p"] },
                { word: "bat", ipa: "/bæt/", letters: ["b", "a", "t"] },
                { word: "bet", ipa: "/bet/", letters: ["b", "e", "t"] },
                { word: "rat", ipa: "/ræt/", letters: ["r", "a", "t"] },
                { word: "lap", ipa: "/læp/", letters: ["l", "a", "p"] },
                { word: "nap", ipa: "/næp/", letters: ["n", "a", "p"] },
                { word: "pan", ipa: "/pæn/", letters: ["p", "a", "n"] },
                { word: "log", ipa: "/lɒɡ/", letters: ["l", "o", "g"] },
                { word: "hat", ipa: "/hæt/", letters: ["h", "a", "t"] },
                { word: "pot", ipa: "/pɒt/", letters: ["p", "o", "t"] },
                { word: "bug", ipa: "/bʌɡ/", letters: ["b", "u", "g"] },
                { word: "top", ipa: "/tɒp/", letters: ["t", "o", "p"] },
                { word: "cup", ipa: "/kʌp/", letters: ["c", "u", "p"] },
                { word: "jut", ipa: "/dʒʌt/", letters: ["j", "u", "t"] },
                { word: "nod", ipa: "/nɒd/", letters: ["n", "o", "d"] },
                { word: "mom", ipa: "/mɒm/", letters: ["m", "o", "m"] },
                { word: "can", ipa: "/kæn/", letters: ["c", "a", "n"] },
                { word: "rug", ipa: "/rʌɡ/", letters: ["r", "u", "g"] },
                { word: "mum", ipa: "/mʌm/", letters: ["m", "u", "m"] },
                { word: "hut", ipa: "/hʌt/", letters: ["h", "u", "t"] },
                { word: "mud", ipa: "/mʌd/", letters: ["m", "u", "d"] },
                { word: "Ben", ipa: "/ben/", letters: ["B", "e", "n"] },
                { word: "sit", ipa: "/sɪt/", letters: ["s", "i", "t"] },
                { word: "Rob", ipa: "/rɒb/", letters: ["R", "o", "b"] },
                { word: "pox", ipa: "/pɒks/", letters: ["p", "o", "x"] },
                { word: "hug", ipa: "/hʌɡ/", letters: ["h", "u", "g"] },
                { word: "hit", ipa: "/hɪt/", letters: ["h", "i", "t"] },
                { word: "max", ipa: "/mæks/", letters: ["m", "a", "x"] },
                { word: "six", ipa: "/sɪks/", letters: ["s", "i", "x"] },
                { word: "van", ipa: "/væn/", letters: ["v", "a", "n"] },
                { word: "cap", ipa: "/kæp/", letters: ["c", "a", "p"] },
                { word: "box", ipa: "/bɒks/", letters: ["b", "o", "x"] },
                { word: "tag", ipa: "/tæɡ/", letters: ["t", "a", "g"] },
                { word: "leg", ipa: "/leɡ/", letters: ["l", "e", "g"] },
                { word: "tad", ipa: "/tæd/", letters: ["t", "a", "d"] },
                { word: "lid", ipa: "/lɪd/", letters: ["l", "i", "d"] },
                { word: "sun", ipa: "/sʌn/", letters: ["s", "u", "n"] },
                { word: "lip", ipa: "/lɪp/", letters: ["l", "i", "p"] },
                { word: "dad", ipa: "/dæd/", letters: ["d", "a", "d"] },
                { word: "lox", ipa: "/lɒks/", letters: ["l", "o", "x"] },
                { word: "dip", ipa: "/dɪp/", letters: ["d", "i", "p"] },
                { word: "zag", ipa: "/zæɡ/", letters: ["z", "a", "g"] },
                { word: "hop", ipa: "/hɒp/", letters: ["h", "o", "p"] },
                { word: "bum", ipa: "/bʌm/", letters: ["b", "u", "m"] },
                { word: "pet", ipa: "/pet/", letters: ["p", "e", "t"] },
                { word: "dot", ipa: "/dɒt/", letters: ["d", "o", "t"] },
                { word: "net", ipa: "/net/", letters: ["n", "e", "t"] },
                { word: "big", ipa: "/bɪɡ/", letters: ["b", "i", "g"] },
                { word: "sop", ipa: "/sɒp/", letters: ["s", "o", "p"] },
                { word: "pop", ipa: "/pɒp/", letters: ["p", "o", "p"] },
                { word: "vet", ipa: "/vet/", letters: ["v", "e", "t"] },
                { word: "mug", ipa: "/mʌɡ/", letters: ["m", "u", "g"] },
                { word: "jog", ipa: "/dʒɒɡ/", letters: ["j", "o", "g"] },
                { word: "hog", ipa: "/hɒɡ/", letters: ["h", "o", "g"] },
                { word: "kit", ipa: "/kɪt/", letters: ["k", "i", "t"] },
                { word: "hen", ipa: "/hen/", letters: ["h", "e", "n"] },
                { word: "wed", ipa: "/wed/", letters: ["w", "e", "d"] },
                { word: "wet", ipa: "/wet/", letters: ["w", "e", "t"] },
                { word: "ran", ipa: "/ræn/", letters: ["r", "a", "n"] },
                { word: "pig", ipa: "/pɪɡ/", letters: ["p", "i", "g"] },
                { word: "bun", ipa: "/bʌn/", letters: ["b", "u", "n"] },
                { word: "pen", ipa: "/pen/", letters: ["p", "e", "n"] },
                { word: "cod", ipa: "/kɒd/", letters: ["c", "o", "d"] },
                { word: "zip", ipa: "/zɪp/", letters: ["z", "i", "p"] },
                { word: "lug", ipa: "/lʌɡ/", letters: ["l", "u", "g"] },
                { word: "fix", ipa: "/fɪks/", letters: ["f", "i", "x"] },
                { word: "mob", ipa: "/mɒb/", letters: ["m", "o", "b"] },
                { word: "bit", ipa: "/bɪt/", letters: ["b", "i", "t"] }
            ];

            // 将单词分为10个关卡
            const levels = Array.from({ length: 10 }, (_, i) => ({
                level: i + 1,
                words: cvcWords.slice(i * 10, (i + 1) * 10)
            }));

            // 字母发音映射
            const letterSounds = {
                a: "æ", b: "b", c: "k", d: "d", e: "e", f: "f", 
                g: "ɡ", h: "h", i: "ɪ", j: "dʒ", k: "k", l: "l", 
                m: "m", n: "n", o: "ɒ", p: "p", q: "kw", r: "r", 
                s: "s", t: "t", u: "ʌ", v: "v", w: "w", x: "ks", 
                y: "j", z: "z"
            };

            // 🎯 使用七牛云CDN的音频URL获取函数
            const getAudioUrl = (key, type = 'letter') => {
                const baseUrl = 'http://t49dha5by.hb-bkt.clouddn.com';
                
                if (type === 'letter') {
                    // 字母发音使用七牛云CDN
                    return `${baseUrl}/${key.toLowerCase()}.mp3`;
                } 
                else if (type === 'word') {
                    // 单词发音使用有道API
                    return `https://dict.youdao.com/dictvoice?audio=${key}&type=2`;
                } 
                else if (type === 'ipa') {
                    // 音标发音也使用七牛云CDN
                    const audioFile = key.toLowerCase();
                    return `${baseUrl}/${audioFile}.mp3`;
                }
                return null;
            };

            // 🎯 简化的播放函数
            const playAudio = (key, type = 'letter') => {
                const audioUrl = getAudioUrl(key, type);
                if (!audioUrl) {
                    console.warn(`没有找到音频: ${key}`);
                    return;
                }

                console.log(`播放音频: ${audioUrl}`); // 调试信息

                const audio = new Audio(audioUrl);
                
                audio.addEventListener('canplay', () => {
                    console.log(`音频可以播放: ${key}`);
                });
                
                audio.addEventListener('error', (e) => {
                    console.error(`音频播放错误: ${key}`, e);
                    console.log(`音频URL: ${audioUrl}`);
                    
                    // 备用方案：使用TTS
                    if (type === 'letter') {
                        speakText(key);
                    }
                });
                
                audio.addEventListener('loadstart', () => {
                    console.log(`开始加载音频: ${key}`);
                });

                // 直接播放
                audio.play().catch(error => {
                    console.error(`播放被阻止: ${key}`, error);
                    // 如果自动播放被阻止，尝试使用TTS
                    if (type === 'letter') {
                        speakText(key);
                    }
                });
            };

            // TTS备用方案
            const speakText = (text) => {
                if ('speechSynthesis' in window) {
                    const utterance = new SpeechSynthesisUtterance(text);
                    utterance.lang = 'en-US';
                    utterance.rate = 0.7;
                    speechSynthesis.speak(utterance);
                    console.log(`使用TTS播放: ${text}`);
                } else {
                    console.warn('浏览器不支持语音合成');
                }
            };

            // 播放字母发音
            const playLetterSound = (letter) => {
                console.log(`点击字母: ${letter}`);
                playAudio(letter, 'letter');
            };

            // 播放单词发音
            const playWordPronunciation = (word) => {
                setSelectedWordForPronunciation(word);
                playAudio(word, 'word');
            };

            // 播放音标发音
            const playIpaSound = (ipa) => {
                const cleanIpa = ipa.replace(/\//g, '');
                playAudio(cleanIpa, 'ipa');
            };

            // 处理字母点击
            const handleLetterClick = (letter) => {
                playLetterSound(letter);
                
                if (mode === "challenge") {
                    if (selectedLetters.length < 3 && !selectedLetters.includes(letter)) {
                        setSelectedLetters([...selectedLetters, letter]);
                        setCurrentWord(prev => prev + letter);
                    }
                } else {
                    if (freeWord.length < 3) {
                        setFreeWord(prev => prev + letter);
                    }
                }
            };

            // 渲染字母块
            const renderLetterBlock = (letter) => {
                return React.createElement('div', {
                    key: letter,
                    draggable: true,
                    onDragStart: (e) => handleDragStart(e, letter),
                    onClick: () => handleLetterClick(letter),
                    className: `${getLetterColor(letter)} hover:opacity-80 text-gray-800 font-bold rounded-xl p-4 text-3xl cursor-pointer shadow-md transform transition-all duration-200 hover:scale-105 active:scale-95 border-2 border-white hover:border-indigo-300 bounce-hover`
                }, React.createElement('div', {
                    className: "text-center"
                }, [
                    React.createElement('div', {
                        key: 'letter',
                        className: "text-3xl font-bold"
                    }, letter.toLowerCase()),
                    React.createElement('div', {
                        key: 'sound',
                        className: "text-base opacity-75 mt-1 cursor-pointer hover:underline",
                        onClick: (e) => {
                            e.stopPropagation();
                            playIpaSound(`/${letterSounds[letter]}/`);
                        }
                    }, `/${letterSounds[letter]}/`)
                ]));
            };

            // 其他函数保持不变...
            const getLetterColor = (letter) => {
                const colors = {
                    a: 'bg-red-200', b: 'bg-blue-200', c: 'bg-yellow-200', 
                    d: 'bg-green-200', e: 'bg-teal-200', f: 'bg-blue-200',
                    g: 'bg-blue-200', h: 'bg-purple-200', i: 'bg-pink-200',
                    j: 'bg-red-300', k: 'bg-orange-300', l: 'bg-yellow-300',
                    m: 'bg-green-300', n: 'bg-teal-300', o: 'bg-blue-300',
                    p: 'bg-indigo-300', q: 'bg-purple-300', r: 'bg-pink-300',
                    s: 'bg-red-400', t: 'bg-orange-400', u: 'bg-yellow-400',
                    v: 'bg-green-400', w: 'bg-teal-400', x: 'bg-blue-400',
                    y: 'bg-indigo-400', z: 'bg-purple-400'
                };
                return colors[letter] || 'bg-gray-200';
            };

            const handleDragStart = (e, letter) => {
                e.dataTransfer.setData("text/plain", letter);
            };

            const handleDrop = (e, index) => {
                e.preventDefault();
                const letter = e.dataTransfer.getData("text/plain");
                if (mode === "challenge") {
                    if (selectedLetters.length <= index && !selectedLetters.includes(letter)) {
                        const newSelected = [...selectedLetters];
                        newSelected[index] = letter;
                        setSelectedLetters(newSelected);
                        setCurrentWord(newSelected.filter(l => l).join(''));
                    }
                }
            };

            const handleDragOver = (e) => {
                e.preventDefault();
            };

            const removeLetter = (index) => {
                if (mode === "challenge") {
                    const newSelected = [...selectedLetters];
                    newSelected.splice(index, 1);
                    setSelectedLetters(newSelected);
                    setCurrentWord(newSelected.filter(l => l).join(''));
                } else {
                    setFreeWord(prev => prev.slice(0, -1));
                }
            };

            const resetGame = () => {
                if (mode === "challenge") {
                    setSelectedLetters([]);
                    setCurrentWord("");
                } else {
                    setFreeWord("");
                }
                setShowAnswer(false);
                setFeedback("");
                setShowFeedback(false);
            };

            const selectLevel = (level) => {
                setCurrentLevel(level);
                setWordIndex(0);
                setCurrentCvcWord(levels[level - 1].words[0]);
                setSelectedLetters([]);
                setCurrentWord("");
                setShowAnswer(false);
                setFeedback("");
                setShowFeedback(false);
                setShowLevelSelector(false);
            };

            // 自动检查答案
            useEffect(() => {
                if (mode === "challenge" && currentWord.length === 3 && currentCvcWord) {
                    if (currentWord.toLowerCase() === currentCvcWord.word.toLowerCase()) {
                        setFeedback("🎉 太棒了！答案正确！");
                        setShowFeedback(true);
                        setShowAnswer(true);
                    } else {
                        setFeedback("❌ 不对哦，再试试看！");
                        setShowFeedback(true);
                        setTimeout(() => setShowFeedback(false), 2000);
                    }
                }
            }, [currentWord, currentCvcWord, mode]);

            const switchMode = (newMode) => {
                setMode(newMode);
                resetGame();
                if (newMode === "challenge") {
                    setCurrentCvcWord(levels[0].words[0]);
                }
            };

            useEffect(() => {
                if (levels.length > 0 && mode === "challenge") {
                    setCurrentCvcWord(levels[0].words[0]);
                }
            }, [mode]);

            const nextWord = () => {
                if (mode !== "challenge") return;
                const words = levels[currentLevel - 1].words;
                const nextIndex = (wordIndex + 1) % words.length;
                setWordIndex(nextIndex);
                setCurrentCvcWord(words[nextIndex]);
                setSelectedLetters([]);
                setCurrentWord("");
                setShowAnswer(false);
                setFeedback("");
                setShowFeedback(false);
            };

            const prevWord = () => {
                if (mode !== "challenge") return;
                const words = levels[currentLevel - 1].words;
                const prevIndex = wordIndex === 0 ? words.length - 1 : wordIndex - 1;
                setWordIndex(prevIndex);
                setCurrentCvcWord(words[prevIndex]);
                setSelectedLetters([]);
                setCurrentWord("");
                setShowAnswer(false);
                setFeedback("");
                setShowFeedback(false);
            };

            // 渲染关卡选择器模态框
            const renderLevelSelector = () => {
                if (!showLevelSelector) return null;
                
                return React.createElement('div', {
                    className: "modal-overlay",
                    onClick: () => setShowLevelSelector(false)
                }, React.createElement('div', {
                    className: "modal-content",
                    onClick: (e) => e.stopPropagation()
                }, [
                    React.createElement('div', {
                        key: 'header',
                        className: "flex justify-between items-center mb-4"
                    }, [
                        React.createElement('h3', {
                            key: 'title',
                            className: "text-xl font-bold text-indigo-800"
                        }, "选择关卡"),
                        React.createElement('button', {
                            key: 'close',
                            onClick: () => setShowLevelSelector(false),
                            className: "text-gray-500 hover:text-gray-700 text-2xl"
                        }, "×")
                    ]),
                    React.createElement('div', {
                        key: 'levels',
                        className: "grid grid-cols-5 gap-4"
                    }, levels.map((levelData) => 
                        React.createElement('button', {
                            key: levelData.level,
                            onClick: () => selectLevel(levelData.level),
                            className: `p-4 rounded-lg font-semibold transition-colors duration-200 ${
                                currentLevel === levelData.level
                                    ? 'bg-indigo-600 text-white'
                                    : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                            }`
                        }, `第${levelData.level}关`)
                    ))
                ]));
            };

            // 渲染单词列表模态框
            const renderWordList = () => {
                if (!showWordList) return null;
                
                return React.createElement('div', {
                    className: "modal-overlay",
                    onClick: () => setShowWordList(false)
                }, React.createElement('div', {
                    className: "modal-content",
                    style: { width: '120%' },
                    onClick: (e) => e.stopPropagation()
                }, [
                    React.createElement('div', {
                        key: 'header',
                        className: "flex justify-between items-center mb-4"
                    }, [
                        React.createElement('h3', {
                            key: 'title',
                            className: "text-xl font-bold text-indigo-800"
                        }, "单词列表"),
                        React.createElement('button', {
                            key: 'close',
                            onClick: () => setShowWordList(false),
                            className: "text-gray-500 hover:text-gray-700 text-2xl"
                        }, "×")
                    ]),
                    React.createElement('div', {
                        key: 'words',
                        className: "grid grid-cols-5 gap-2"
                    }, levels[currentLevel - 1].words.map((wordObj, index) => 
                        React.createElement('div', {
                            key: index,
                            className: "text-center p-2 bg-white rounded border cursor-pointer hover:bg-gray-100 transition-colors duration-200",
                            style: { width: '50%' },
                            onClick: () => playWordPronunciation(wordObj.word)
                        }, [
                            React.createElement('div', {
                                key: 'word',
                                className: "font-bold text-sm"
                            }, wordObj.word),
                            React.createElement('div', {
                                key: 'ipa',
                                className: "text-xs text-gray-500"
                            }, wordObj.ipa)
                        ])
                    ))
                ]));
            };

            if (mode === "challenge" && !currentCvcWord) {
                return React.createElement('div', {
                    className: "min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center"
                }, React.createElement('div', {
                    className: "text-2xl text-indigo-600"
                }, "加载中..."));
            }

            return React.createElement('div', {
                className: "min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-4"
            }, [
                React.createElement('div', {
                    key: 'main',
                    className: "max-w-6xl mx-auto"
                }, [
                    // Header
                    React.createElement('div', {
                        key: 'header',
                        className: "text-center mb-8 pt-8"
                    }, [
                        React.createElement('h1', {
                            key: 'title',
                            className: "text-4xl font-bold text-indigo-800 mb-2"
                        }, "虫妈LTR自然拼读"),
                        // Mode Switch
                        React.createElement('div', {
                            key: 'mode-switch',
                            className: "flex justify-center space-x-4 mb-4"
                        }, [
                            React.createElement('button', {
                                key: 'free',
                                onClick: () => switchMode("free"),
                                className: `px-6 py-2 rounded-lg font-semibold transition-colors duration-200 ${
                                    mode === "free" 
                                        ? 'bg-indigo-600 text-white' 
                                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                                }`
                            }, "练习模式"),
                            React.createElement('button', {
                                key: 'challenge',
                                onClick: () => switchMode("challenge"),
                                className: `px-6 py-2 rounded-lg font-semibold transition-colors duration-200 ${
                                    mode === "challenge" 
                                        ? 'bg-indigo-600 text-white' 
                                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                                }`
                            }, "闯关模式")
                        ])
                    ]),

                    mode === "challenge" ? 
                    // 闯关模式
                    React.createElement('div', {
                        key: 'challenge-mode',
                        className: "bg-white rounded-2xl shadow-xl p-8 mb-8"
                    }, [
                        // 主游戏区域
                        React.createElement('div', {
                            key: 'game-area',
                            className: "flex gap-8 mobile-layout"
                        }, [
                            // 左侧区域
                            React.createElement('div', {
                                key: 'left',
                                className: "w-1/2 mobile-width"
                            }, [
                                // 单词导航
                                React.createElement('div', {
                                    key: 'navigation',
                                    className: "flex justify-center items-center mb-6"
                                }, [
                                    React.createElement('button', {
                                        key: 'prev',
                                        onClick: prevWord,
                                        className: "bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-6 py-2 rounded-lg font-semibold transition-colors duration-200 mr-4"
                                    }, "←"),
                                    React.createElement('div', {
                                        key: 'word-display',
                                        className: "text-center mx-4"
                                    }, React.createElement('div', {
                                        className: "text-4xl font-bold text-indigo-700",
                                        style: { width: '68px', margin: '0 auto' }
                                    }, currentCvcWord?.word)),
                                    React.createElement('button', {
                                        key: 'next',
                                        onClick: nextWord,
                                        className: "bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-semibold transition-colors duration-200 ml-4"
                                    }, "→")
                                ]),
                                // 字母槽位
                                React.createElement('div', {
                                    key: 'slots',
                                    className: "flex space-x-3 mb-6 justify-center"
                                }, [0, 1, 2].map((index) => 
                                    React.createElement('div', {
                                        key: index,
                                        className: `w-20 h-20 border-2 ${
                                            index === 0 || index === 2 ? 'border-blue-400 bg-blue-100' : 'border-red-400 bg-red-100'
                                        } flex items-center justify-center text-3xl font-bold cursor-pointer transition-all duration-200 hover:bg-gray-50 rounded-lg shadow-md`,
                                        onDrop: (e) => handleDrop(e, index),
                                        onDragOver: handleDragOver,
                                        onClick: () => selectedLetters[index] && removeLetter(index)
                                    }, selectedLetters[index] || 
                                        React.createElement('span', {
                                            className: "text-gray-400 text-2xl"
                                        }, "_"))
                                )),
                                // IPA音标
                                React.createElement('div', {
                                    key: 'ipa',
                                    className: "flex space-x-3 mb-6 justify-center"
                                }, [0, 1, 2].map((index) =>
                                    React.createElement('div', {
                                        key: index,
                                        className: `bg-blue-50 border-2 border-blue-300 p-3 rounded-lg text-center cursor-pointer hover:bg-blue-100 transition-colors duration-200 w-20 ${
                                            index === 1 ? 'bg-red-50 border-red-300 hover:bg-red-100' : ''
                                        }`,
                                        style: { height: '80px' },
                                        onClick: () => currentWord.length === 3 && playIpaSound(`/${letterSounds[currentCvcWord.letters[index]]}/`)
                                    }, currentWord.length === 3 ? 
                                        React.createElement('div', {
                                            className: "text-xl font-bold flex items-center justify-center h-full"
                                        }, `/${letterSounds[currentCvcWord.letters[index]]}/`) :
                                        React.createElement('div', {
                                            className: "flex items-center justify-center h-full"
                                        }, React.createElement('span', {
                                            className: "text-gray-400 text-2xl"
                                        }, "_"))
                                    )
                                ))
                            ]),
                            // 右侧区域
                            React.createElement('div', {
                                key: 'right',
                                className: "w-1/2 mobile-width"
                            }, [
                                // 关卡选择器
                                React.createElement('div', {
                                    key: 'controls',
                                    className: "flex justify-end items-center mb-6"
                                }, React.createElement('div', {
                                    className: "text-right"
                                }, React.createElement('div', {
                                    className: "flex justify-end space-x-2"
                                }, [
                                    React.createElement('button', {
                                        key: 'word-list',
                                        onClick: () => setShowWordList(!showWordList),
                                        className: "bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-lg font-semibold transition-colors duration-200 text-lg"
                                    }, showWordList ? '隐藏单词列表' : '显示单词列表'),
                                    React.createElement('button', {
                                        key: 'level-select',
                                        onClick: () => setShowLevelSelector(!showLevelSelector),
                                        className: "bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors duration-200",
                                        style: { width: '120px' }
                                    }, "选择关卡")
                                ]))),
                                // 反馈区域
                                React.createElement('div', {
                                    key: 'feedback',
                                    className: "mt-6"
                                }, React.createElement('div', {
                                    className: `p-6 rounded-xl border-2 ${
                                        showAnswer ? 'bg-yellow-50 border-yellow-200' : 'bg-gray-100 border-gray-200'
                                    }`,
                                    style: { height: '176px' }
                                }, [
                                    showFeedback && React.createElement('div', {
                                        key: 'feedback-message',
                                        className: `mb-2 p-3 rounded-lg font-semibold ${
                                            feedback.includes('太棒了') ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
                                        }`,
                                        style: { height: '40px' }
                                    }, React.createElement('div', {
                                        className: "flex items-center"
                                    }, [
                                        React.createElement('svg', {
                                            key: 'icon',
                                            className: "w-4 h-4 mr-2",
                                            fill: "currentColor",
                                            viewBox: "0 0 20 20"
                                        }, React.createElement('path', {
                                            fillRule: "evenodd",
                                            d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
                                            clipRule: "evenodd"
                                        })),
                                        React.createElement('span', {
                                            key: 'text',
                                            className: "text-sm"
                                        }, feedback)
                                    ])),
                                    showAnswer ? React.createElement('div', {
                                        key: 'answer-buttons',
                                        className: "text-center"
                                    }, [
                                        React.createElement('button', {
                                            key: 'pronounce',
                                            onClick: () => playWordPronunciation(currentCvcWord.word),
                                            className: "bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-1 rounded-lg font-semibold transition-colors duration-200 flex items-center mx-auto mb-3 text-sm",
                                            style: { height: '35px' }
                                        }, [
                                            React.createElement('svg', {
                                                key: 'play-icon',
                                                className: "w-4 h-4 mr-2",
                                                fill: "currentColor",
                                                viewBox: "0 0 20 20"
                                            }, React.createElement('path', {
                                                fillRule: "evenodd",
                                                d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.106A1 1 0 008 8v4a1 1 0 001.555.894l3-2a1 1 0 000-1.788l-3-2z",
                                                clipRule: "evenodd"
                                            })),
                                            "听发音"
                                        ]),
                                        React.createElement('button', {
                                            key: 'reset',
                                            onClick: resetGame,
                                            className: "bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded-lg font-semibold transition-colors duration-200 mx-auto block text-sm",
                                            style: { height: '30px' }
                                        }, "🔄 重新开始")
                                    ]) : 
                                    !showFeedback && React.createElement('div', {
                                        key: 'empty-state',
                                        className: "text-center text-gray-400 h-full flex flex-col items-center justify-center"
                                    }, [
                                        React.createElement('div', {
                                            key: 'question',
                                            className: "text-3xl mb-2"
                                        }, "?"),
                                        React.createElement('div', {
                                            key: 'message',
                                            className: "text-base"
                                        }, "等待拼词结果"),
                                        React.createElement('button', {
                                            key: 'reset-empty',
                                            onClick: resetGame,
                                            className: "bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded-lg font-semibold transition-colors duration-200 mx-auto block mt-4 text-sm",
                                            style: { height: '30px' }
                                        }, "🔄 重新开始")
                                    ])
                                ]))
                            ])
                        ]),
                        // 字母网格
                        React.createElement('div', {
                            key: 'letters-grid',
                            className: "grid grid-cols-7 gap-3 mt-8 mobile-grid"
                        }, Object.keys(letterSounds).map((letter) => renderLetterBlock(letter))),
                        // 模态框
                        renderLevelSelector(),
                        renderWordList()
                    ]) : 
                    // 练习模式
                    React.createElement('div', {
                        key: 'free-mode',
                        className: "bg-white rounded-2xl shadow-xl p-8 mb-8"
                    }, [
                        // 练习版拼词区域
                        React.createElement('div', {
                            key: 'free-area',
                            className: "flex flex-col items-center mb-6"
                        }, [
                            // 拼词显示区域
                            React.createElement('div', {
                                key: 'free-slots',
                                className: "flex space-x-3 mb-4 justify-center"
                            }, [0, 1, 2].map((index) =>
                                React.createElement('div', {
                                    key: index,
                                    className: `w-20 h-20 border-2 ${
                                        index === 0 || index === 2 ? 'border-blue-400 bg-blue-100' : 'border-red-400 bg-red-100'
                                    } flex items-center justify-center text-3xl font-bold cursor-pointer transition-all duration-200 hover:bg-gray-50 rounded-lg shadow-md`,
                                    onClick: () => freeWord[index] && removeLetter(index)
                                }, freeWord[index] || 
                                    React.createElement('span', {
                                        className: "text-gray-400 text-2xl"
                                    }, "_"))
                            )),
                            // 当前单词显示
                            React.createElement('div', {
                                key: 'free-display',
                                className: "text-center mb-4"
                            }, [
                                React.createElement('div', {
                                    key: 'word-area',
                                    className: "text-xl text-gray-700 mb-2",
                                    style: { height: '60px' }
                                }, React.createElement('div', {
                                    className: "flex items-center justify-center"
                                }, [
                                    React.createElement('span', {
                                        key: 'word',
                                        className: "font-bold text-indigo-700 text-2xl"
                                    }, freeWord || "___"),
                                    React.createElement('button', {
                                        key: 'pronounce-free',
                                        onClick: () => freeWord && playWordPronunciation(freeWord),
                                        className: "bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-lg font-semibold transition-colors duration-200 ml-4 text-sm mr-2",
                                        disabled: !freeWord
                                    }, "🎵 听发音"),
                                    React.createElement('button', {
                                        key: 'reset-free',
                                        onClick: resetGame,
                                        className: "bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 rounded-lg font-semibold transition-colors duration-200 text-sm"
                                    }, "🔄 清空")
                                ])),
                                showFeedback && React.createElement('div', {
                                    key: 'free-feedback',
                                    className: "mt-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm"
                                }, "这个单词是无意义单词，不发音")
                            ])
                        ]),
                        // 字母网格
                        React.createElement('div', {
                            key: 'free-letters',
                            className: "grid grid-cols-7 gap-3 mobile-grid"
                        }, Object.keys(letterSounds).map((letter) => renderLetterBlock(letter)))
                    ])
                ]),
                // Footer
                React.createElement('footer', {
                    key: 'footer',
                    className: "text-center text-gray-500 text-sm mt-8"
                }, "© 2025 虫妈LTR自然拼读")
            ]);
        };

        ReactDOM.render(React.createElement(App), document.getElementById('root'));
    </script>
</body>
</html>